<template>
	<div>
		<!-- 搜索 -->
		<div style="display: flex; margin: 10px;">
			<el-input v-model="search.searchName" placeholder="搜索车辆" style="width: 20%;"></el-input>
			<el-button icon="el-icon-search" type="primary" @click="onBtnSearch()" round style="margin-left: 10px;">搜索
			</el-button>
		</div>
		<!--表格-->
		<el-table :data="usedcarList" stripe>
			<!-- 车辆id -->
			<el-table-column label="车辆id" align="center" prop="id"/>
			<!-- 图片 -->
			<el-table-column label="图片" align="center">
				<template #default="scope">
					<el-image :src="scope.row.img" fit="contain" :preview-src-list="scope.row.imgs"/>
				</template>
			</el-table-column>
			<!-- 其他列名 -->
			<el-table-column v-for="(column,index) in columns" :key="index" align="center" :label="column.label"
				:prop="column.prop" :width="column.width" />
			<!-- 操作 -->
			<el-table-column label="操作" width="150" fixed="right" align="center">
				<template #default="scope">
					<el-button icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)" type="danger">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<div style="padding:10px;">
			<el-pagination layout="total, prev, pager, next" @current-change="refreshPageRequest"
				:current-page="pageData.pageNum" :page-size="pageData.pageSize" :total="pageData.totalSize"
				style="float:right;">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import columns from '../../util/table/columns.js'
	export default {
		//使用inject导入引用的reload，然后直接调用即可
		inject: ["reload"],
		data() {
			return {
				//车辆的表格列名称
				columns: columns.usedcarColumns,
				//分页请求
				pageRequest: {
					currentPage: 1,
					pageSize: 7,
					params: {}
				},
				//结果返回的分页数据
				pageData: {},
				//车辆列表
				usedcarList: [],
				//搜索关键字
				search: {
					searchName: ""
				}
			}
		},
		mounted() {
			this.loadUsedcar()
		},
		methods: {
			//加载车辆
			loadUsedcar() {
				let _this = this;
				_this.$axios({
					method: 'post',
					url: '/usedcar/findAllForManager',
					data: _this.pageRequest
				}).then((resp) => {
					_this.pageData = resp.data
					_this.usedcarList = resp.data.content
				})
			},
			//分页查询
			refreshPageRequest(currentPage) {
				this.pageRequest.currentPage = currentPage
				this.pageRequest.params.searchName = this.search.searchName
				this.loadUsedcar()
			},
			//搜索
			onBtnSearch() {
				this.pageRequest.currentPage = 1
				this.pageRequest.params.searchName = this.search.searchName
				this.loadUsedcar()
			},
			//删除
			handleDelete(index, row) {
				this.$confirm('确认删除吗？', '删除提示', {
					center: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					let _this = this
					_this.$axios({
						method: 'delete',
						url: '/usedcar/delete/' + row.id,
					}).then((resp) => {
						_this.$message.success(resp.msg)
						_this.reload()
					})
				}).catch(() => {
					console.log("取消删除")
				})
			}
		}
	}
</script>

<style scoped>
</style>
